@extends('layouts.default')
@section('main')
    <link rel="stylesheet" href="/css/uniform.css" />
    <link rel="stylesheet" href="/css/select2.css" />

    <script type="text/javascript" src="{{URL::asset('js/')}}/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/hightcharts/highcharts.js"></script>
    <script src="{{URL::asset('js/My97DatePicker/')}}/WdatePicker.js"></script>

    <script>
        //初始函数，设置定时器，定时取数据
        $(function () {
            queryDayRegData();
        });

        //图表属性，不包含数据
        var dayClickOptions = {
            chart: {
                renderTo:'dayClickCon',
                type:'spline'
            },
            title: {
                text: '发现-投资人按钮日点击频率统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '日点击频率'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name: '总计'
            }, {
                name: 'ios'
            }, {
                name: 'android'
            }],
            tooltip: {
                valueSuffix: ''
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };


        var weekClickOptions = {
            chart: {
                renderTo:'weekClickCon',
                type:'spline'
            },
            title: {
                text: '发现-投资人按钮周点击频率统计（工作周）',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '周点击频率'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name: 'total'
            }, {
                name: 'ios'
            }, {
                name: 'android'
            }],
            tooltip: {
                valueSuffix: ''
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };

        var monthClickOptions = {
            chart: {
                renderTo:'monthClickCon',
                type:'spline'
            },
            title: {
                text: '发现-投资人按钮月点击频率统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '月点击频率'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name: 'total'
            }, {
                name: 'ios'
            }, {
                name: 'android'
            }],
            tooltip: {
                valueSuffix: ''
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };


        var dayClickCategories = [];
        var dayTotalClickDatas = [];
        var dayWebClickDatas = [];
        var dayIosClickDatas = [];
        var dayAndroidClickDatas = [];

        var weekClickCategories = [];
        var weekTotalClickDatas = [];
        var weekWebClickDatas = [];
        var weekIosClickDatas = [];
        var weekAndroidClickDatas = [];

        var monthClickCategories = [];
        var monthTotalClickDatas = [];
        var monthWebClickDatas = [];
        var monthIosClickDatas = [];
        var monthAndroidClickDatas = [];

        //Ajax 获取数据并解析创建Highcharts图表
        function queryDayRegData() {
            $.ajax({
                url:'/buttonclick/di-day-click',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        dayClickCategories[i] = n[0];

                        for(var j in n[1]){

                            if(j=='total'){
                                dayTotalClickDatas[i] = n[1][j]*1;
                            }


                            if(j=='ios'){
                                dayIosClickDatas[i] = n[1][j]*1;
                            }

                            if(j=='android'){
                                dayAndroidClickDatas[i] = n[1][j]*1;
                            }
                        }

                    });

                    dayClickOptions.xAxis.categories = dayClickCategories;
                    dayClickOptions.series[0].data = dayTotalClickDatas;
                    dayClickOptions.series[1].data = dayIosClickDatas;
                    dayClickOptions.series[2].data = dayAndroidClickDatas;
                    chart = new Highcharts.Chart(dayClickOptions);
                }
            });

            $.ajax({
                url:'/buttonclick/di-week-click',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        weekClickCategories[i] = n[0];

                        for(var j in n[1]){
                            if(j=='total'){
                                weekTotalClickDatas[i] = n[1][j]*1;
                            }

                            if(j=='ios'){
                                weekIosClickDatas[i] = n[1][j]*1;
                            }

                            if(j=='android'){
                                weekAndroidClickDatas[i] = n[1][j]*1;
                            }
                        }
                    });

                    weekClickOptions.xAxis.categories = weekClickCategories;
                    weekClickOptions.series[0].data = weekTotalClickDatas;
                    weekClickOptions.series[1].data = weekIosClickDatas;
                    weekClickOptions.series[2].data = weekAndroidClickDatas;
                    chart = new Highcharts.Chart(weekClickOptions);
                }
            });

            $.ajax({
                url:'/buttonclick/di-month-click',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        monthClickCategories[i] = n[0];
                        for(var j in n[1]){
                            if(j=='total'){
                                monthTotalClickDatas[i] = n[1][j]*1;
                            }

                            if(j=='ios'){
                                monthIosClickDatas[i] = n[1][j]*1;
                            }

                            if(j=='android'){
                                monthAndroidClickDatas[i] = n[1][j]*1;
                            }
                        }
                    });
                    monthClickOptions.xAxis.categories = monthClickCategories;
                    monthClickOptions.series[0].data = monthTotalClickDatas;
                    monthClickOptions.series[1].data = monthIosClickDatas;
                    monthClickOptions.series[2].data = monthAndroidClickDatas;
                    chart = new Highcharts.Chart(monthClickOptions);
                }
            });
        }

    </script>
    <div id="content">
        <div id="content-header">
            <div id="breadcrumb">
                <a href="{{url('home')}}" title="返回首页" class="tip-bottom"><i class="icon-home"></i> 首页</a>
            </div>
        </div>
        <div class="container-fluid">
            <div class="widget-title">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab1">点击频率</a></li>

                </ul>
            </div>

            <div class="widget-content tab-content">
                <div id="tab1" class="tab-pane active">
                    <div>
                        <p>
                            <button class="btn tip-top" id="dayClick">日</button>
                            <button class="btn tip-left" id="weekClick">周</button>
                            <button class="btn tip-right" id="monthClick">月</button>
                        </p>
                        <div id="dayClickCon" style="width: 1100px; height: 400px; margin: 0 "></div>
                        <div id="weekClickCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                        <div id="monthClickCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                    </div>
                </div>


            </div>
        </div>


    </div>
    <script src="/js/matrix.tables.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/common.js"></script>
    <script>
        $("#dayClick").click(function(){
            $("#dayClickCon").show();
            $("#weekClickCon").hide();
            $("#monthClickCon").hide();
        });

        $("#weekClick").click(function(){
            $("#dayClickCon").hide();
            $("#weekClickCon").show();
            $("#monthClickCon").hide();
        });

        $("#monthClick").click(function(){
            $("#dayClickCon").hide();
            $("#weekClickCon").hide();
            $("#monthClickCon").show();
        });


    </script>

@stop
